import React, { Component } from 'react'
import 'rmc-picker/assets/index.css';
import 'rmc-date-picker/assets/index.css';
import 'rmc-picker/assets/popup.css';
import zh_CN from 'rmc-date-picker/lib/locale/zh_CN';
import DatePicker from 'rmc-date-picker/lib/DatePicker';
import PopPicker from 'rmc-date-picker/lib/Popup';
import classNames from 'classnames'
import './index.scss';
import moment from 'moment';

class CustomDatePicker extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        date: null,
      };
    }
  
    onChange = (date) => {
        this.props.onChange(date);
    }
  
    onDismiss = () => {
    }
  
    render() {
      let { date, minDate=moment('1968-01-01').toDate(), maxDate, defaultDate=new Date(), children,mode } = this.props;

      const datePicker = (
        <DatePicker
          minDate={minDate}
          maxDate={maxDate}
          defaultDate={defaultDate}
          mode={mode|| 'date'}
          locale={zh_CN}
        />
      );
      return (
          <div className={classNames('datepicker', { 'has-placeholder': !date })}>
            <PopPicker
                datePicker={datePicker}
                transitionName="rmc-picker-popup-slide-fade"
                maskTransitionName="rmc-picker-popup-fade"
                title={'选择日期'}
                okText={'确认'}
                date={date}
                dismissText={'取消'}
                onDismiss={this.onDismiss}
                onChange={this.onChange}>
                { children }
            </PopPicker>
          </div>
      );
    }
  }

  export default CustomDatePicker;